<template>
  <div>
    <el-tabs v-model="state.activeName" @tab-click="handleClick">
      <el-tab-pane v-for="item in state.tabList" :label="item.label" :value="item.name" :key="item.value">
        <div>
          {{ item }}
          <el-input v-model="item.label" placeholder="" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue"
const state = reactive({
  tabList: [
    { label: "测试环境", value: "sit", name: "1" },
    { label: "开发环境", value: "dev", name: "2" },
    { label: "生产环境", value: "prod", name: "3" }
  ],
  activeName: "1"
})
const handleClick = (tab: any) => {
  console.log(tab)
}
</script>
